<template>
	<view class="page">
		<app-title :title='`${title}互转`'></app-title>
		<view class="total_box">
			<view class="Total">
				<view class="tex">
					{{title === '余额'?'':title}}余额
				</view>
				<view class="num">
					{{res.balence}}
				</view>
			</view>
		</view>
		<view class="box">
			<view class="item" style="">
				<view class="">
					赠送账户
				</view>
				<input type="text" v-model="user_mobile" placeholder="请输入赠送账户" />

			</view>
			<view class="item">
				<view class="">
					赠送数量
				</view>
				<input type="text" v-model="num" placeholder="请输入赠送数量" />
			</view>
		</view>




		<view class="button" @click="openKeyboardFun">
			确认
		</view>


		<view class="pay_password">
			<uv-keyboard ref="keyboard" mode="number" @change="valChange" @backspace="backspace" :dotDisabled="true"
				@cancel="show = !show,paypwd = ''" @confirm="queren" :show="show">
				<slot name="default">
					<p style="padding: 20rpx;text-align: center;">请输入交易密码</p>
					<uv-code-input v-model="paypwd" :disabledKeyboard='true' mode="line"
						style="padding: 20rpx;"></uv-code-input>
				</slot>
			</uv-keyboard>
		</view>

	</view>
</template>

<script>
	import {
		api_index_djf_mutual_rotation,
		api_index_ymd_mutual_rotation,
		api_index_credit2_mutual_rotation,
		api_index_mjf_mutual_rotation,
		api_index_hz_info
	} from '@/api/member.js'
	export default {
		data() {
			return {
				res: '',
				show: true,
				user_mobile: '',
				openid: '',
				num: '',
				paypwd: '',
				equipment: '',
				title: ''
			}
		},
		onLoad(e) {
			console.log(e);
			this.title = e.title;
			this.type = e.type;
			if (process.env.UNI_PLATFORM === 'h5') {
				this.equipment = 'H5'
			} else if (process.env.UNI_PLATFORM === 'app-plus') {
				this.equipment = 'App'
			}
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.api_index_hz_infoFun({
						openid: this.openid,
						type: this.type
					})
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
		},
		methods: {
			openKeyboardFun() {
				this.$refs.keyboard.open();
			},
			queren() {
				if (this.type === 'ymd') {
					this.api_index_ymd_mutual_rotationFun();
				} else if (this.type === 'credit2') {
					this.api_index_credit2_mutual_rotationFun();
				} else if (this.type === 'mjf') {
					this.api_index_mjf_mutual_rotationFun();
				} else {
					this.api_index_djf_mutual_rotationFun();
				}

			},
			valChange(e) {
				console.log(e);
				if (this.paypwd.length > 6) {
					return
				} else {
					this.paypwd += e;
				}
			},
			async api_index_hz_infoFun(up) {
				let data = await api_index_hz_info(up);
				this.res = data;
			},
			backspace(e) {
				if (this.paypwd.length) this.paypwd = this.paypwd.substr(0, this.paypwd.length - 1);
			},
			//D积分
			async api_index_djf_mutual_rotationFun() {
				let up = {
					openid: this.openid,
					num: this.num,
					paypwd: this.paypwd,
					user_mobile: this.user_mobile
				}
				let data = await api_index_djf_mutual_rotation(up);
				if (data.error === 0) this.num = '', this.user_mobile = ''
				this.show = !this.show;
				this.paypwd = '';
				this.api_index_hz_infoFun({
					openid: this.openid,
					type: this.type
				})
			},
			//余额
			async api_index_credit2_mutual_rotationFun() {
				let up = {
					openid: this.openid,
					num: this.num,
					paypwd: this.paypwd,
					user_mobile: this.user_mobile
				}
				let data = await api_index_credit2_mutual_rotation(up);
				if (data.error === 0) this.num = '', this.user_mobile = '';
				this.show = !this.show;
				this.paypwd = '';
				this.api_index_hz_infoFun({
					openid: this.openid,
					type: this.type
				})
			},
			//M积分
			async api_index_ymd_mutual_rotationFun() {
				let up = {
					openid: this.openid,
					num: this.num,
					paypwd: this.paypwd,
					user_mobile: this.user_mobile
				}
				let data = await api_index_ymd_mutual_rotation(up);
				if (data.error === 0) this.num = '', this.user_mobile = '';
				this.show = !this.show;
				this.paypwd = '';
				this.api_index_hz_infoFun({
					openid: this.openid,
					type: this.type
				})
			},
			async api_index_mjf_mutual_rotationFun() {
				let up = {
					openid: this.openid,
					num: this.num,
					paypwd: this.paypwd,
					user_mobile: this.user_mobile
				}
				let data = await api_index_mjf_mutual_rotation(up);
				if (data.error === 0) this.num = '', this.user_mobile = '';
				this.show = !this.show;
				this.paypwd = '';
				this.api_index_hz_infoFun({
					openid: this.openid,
					type: this.type
				})
			}
		}
	}
</script>

<style lang="scss">
	.total_box {
		width: calc(100vw - 80rpx);
		margin: 60rpx auto;
		height: 200rpx;
		background-color: #fff;
		background-image: url('@/static/member/hldt.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;
		z-index: 3;
		border-radius: 25rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.Total {
			text-align: center;

			.num {
				color: #fff;
				font-family: DM Sans;
				font-size: 47rpx;
				font-weight: 700;
			}

			.tex {
				color: #fff;
				font-family: DM Sans;
				font-size: 36rpx;
			}
		}
	}

	.nav_box {
		width: calc(100vw - 80rpx);
		margin: 20rpx auto;
		height: 104rpx;
		box-sizing: border-box;
		/* Black/Light */
		border: 1px solid rgb(231, 232, 234);
		border-radius: 25rpx;
		padding: 12rpx 18rpx;
		display: flex;
		justify-content: space-between;

		.item1 {
			width: 50%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #000;
			border-radius: 20rpx;
		}

		.select {
			background-color: #383B50;
			color: #fff;
		}
	}


	.box {
		// width: 100%;

		border-radius: 15px;
		padding: 15px 20px;
		margin-top: 20px;

		.item {

			// height:160rpx;
			width: 100%;

			view {

				color: rgb(33, 33, 33);
				font-family: PingFang SC;
				font-size: 30rpx;
				font-weight: 700;
			}

			input {
				width: 100%;
				height: 100rpx;
				background-color: #F1F1F1;
				border-radius: 25rpx;
				margin: 24rpx 0;
				padding: 0 48rpx;
				box-sizing: border-box;
			}
		}

	}

	.button {
		position: absolute;
		bottom: 90px;
		right: 0;
		left: 0;
		width: 80vw;
		height: 50px;
		line-height: 50px;
		margin: auto;
		background-color: #FF3333;
		text-align: center;
		color: #fff;
		border-radius: 25rpx;

	}
</style>